<template>
  <div class="header_box">
    <span>{{ headerTitle }}</span>

    <div class="show_time">{{ time }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: "",
      timeDom: null,
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.showTime();
    },
    showTime() {
      this.timeDom = setInterval(() => {
        // this.$allFun.showTime 该方法可以用moment代替
        this.time = this.$allFun.showTime();
      }, 1000);
    },
    beforeDestroy() {
      clearInterval(this.timeDom);
    },
  },
  props: {
    headerTitle: {
      type: String,
      default: "数据可视化-demo1",
    },
  },
};
</script>

<style lang="less" scoped>
.header_box {
  position: relative;
  height: 100px;
  text-align: center;
  background: url("../../../assets/demo1/head_bg.png") no-repeat;
  background-size: 100% 100%;

  > span {
    font-size: 38px;
    color: #fff;
    line-height: 70px;
  }

  .show_time {
    position: absolute;
    top: 0;
    right: 30px;
    line-height: 75px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 20px;
  }
}
</style>